<template>
  <div class="wrap_notifier_content">
    <div class="wrap_notifier_content--head">
      {{wrapTitle}}
    </div>
    <div class="wrap_notifier_content--content">
      <div class="c-title">
        <el-tag v-if="bedText" :type="annMen.alertColor[notifierContent.noticeType]" class="x-m-r-4"
                size="small">{{ annMen.alert[notifierContent.noticeType] }}
        </el-tag>
        <text>{{ notifierContent.noticeTitle }}</text>
      </div>
      <div class="c-text" v-if="bedText" >
        {{ notifierContent.noticeContent }}
      </div>
      <div class="c-text" v-else >
        {{ notifierContent.messageContent }}
      </div>
      <div class="c-time">
        发布日期：
        <text>{{ notifierContent.lastUpdateDate }}</text>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, shallowRef} from "vue";
import {useRoute} from "vue-router";
import {Gresourcesnotice,mailMessageEdit} from '../../api/advertising/index'
const route = useRoute();
const wrapTitle = shallowRef('公告通知');
const bedText = shallowRef(true);
if(route.query.pageJudgment){
  wrapTitle.value = '站内信'
  bedText.value = false;
}

const notifierContent = shallowRef({
  id: 1,
  title: '新增开放设计市场功能',
  pText: '新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能新功能：新增XX新功能',
  time: '2023-05-23',
  status: 1
})

const annMen = computed(() => {
  const alert = {
    2: '产品',
    3: '活动',
    4: '其他'
  }
  const alertColor = {
    2: '#1bc98a',
    3: 'warning',
    4: 'success'
  }
  return {alert, alertColor}
})
// 公告详情
onMounted(async () => {
  if(bedText.value){
    let id = route.query.queryId ?route.query.queryId  : localStorage.getItem('HomeId')
  let res = await Gresourcesnotice(id)
  notifierContent.value =res.data.data
  }else{
    let id = route.query.rest ?route.query.rest  : localStorage.getItem('HomeId')
let result = await mailMessageEdit(id)
notifierContent.value =result.data.data
console.log('notifierContent',notifierContent.value);

  }

})
</script>


<style lang="scss" scoped>
.wrap_notifier_content {
  width: 100%;
  height: calc(100vh - 100px);
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  box-sizing: border-box;
  overflow-y: auto;

  &--head {
    font-weight: 500;
    border-bottom: 1px solid #f3f5f7;
    padding-bottom: 20px;
  }

  &--content {
    width: 726px;
    margin: 25px auto;
    color: #5e6369;

    .c-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 20px 0;
      color: #303233;
    }

    .c-text {
      line-height: 22px;
    }

    .c-time {
      text-align: right;
      margin: 20px 0;
    }
  }
}
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
</style>